<template>
    <div class="order-detail">
        <!-- 顶部导航栏 -->
        <div class="posflex">
            <van-nav-bar title="订单详情">
                <van-icon name="arrow-left " slot="left" @click.native="goBack"/>
            </van-nav-bar>
        </div>
        <!-- 主体 -->
        <div style="">
            <div class="view">
            <span style="color:#fff">亲！！您的订单哟</span>
            <img style="height:67px;width:99px"
            src="https://file.sdyxmall.com/h5/v1/public/app/img/cancel.ff91da7.png" alt />
        </div>
        <div class="user-address" style="background:white">
            <div class="user-address-right" style="line-height:22px">
                <img style="height:20px;width:20px;"
                src=""
                alt />
                <span style="margin-right:10px;font-size:13px;padding-left:12px;">{{addressInfo.name}}</span>
                <span style="font-size:13px;color:#797d82;">{{addressInfo.tel}}</span>
            </div>
            <div class="user-button-address" style="padding-left:32px;color:#797d82;" >
                {{addressInfo.province}} {{addressInfo.city}}{{addressInfo.county}}{{addressInfo.addressDetail}}
            </div>
        </div>
        <div style="padding:15px;background:white" class="orderGoods">
            <van-card :num="item.buyNum" :price="item.price |formatMoney" :desc="item.slaveName" :title="item.masterName" v-for="(item, index) in carts" :key="index"
                :thumb="item.imgUrl"
                style="font-size: 15px" >
                <van-divider />
            </van-card>
        </div>
        <div style="display:flex;flex-direction: column;padding: 12px 15px;height:98px;background:white" class="payMoney">
            <div style="line-height:24px;flex-grow:1;display:flex;justify-content:space-between">
                <span style="color: #797d82;font-size: 13px;">商品金额</span>
                <span style="color: #2e2f30;font-size: 13px;">￥{{totalMoney}}</span>
            </div>
            <div style="line-height:24px;flex-grow: 1;display:flex;justify-content:space-between">
                <span style="color: #797d82;font-size: 13px;">运费</span>
                <span style="color: #2e2f30;font-size: 13px;">￥{{expressFee | formatMoney}}</span>
            </div>
            <div style="line-height:24px;flex-grow: 1;display:flex;justify-content:space-between">
                <span>实付</span>
                <span style="color: #c03131;">￥{{allFee |formatMoney}}</span>
            </div>
        </div>
        <div style="padding: 12px 15px ;color: #797d82;font-size: 11px;background:white;margin-bottom: 80px;">
            <div style="display:flex;justify-content:space-between">
                <div style="line-height:22px">
                <span style="margin-right:10px">订单编号</span>
                <span>2019 1021 1406 5392 749</span>
                </div>
                <div>
                <van-button type="default" size="mini">复制</van-button>
                </div>
            </div>

            <div>
                <span style="margin-right:10px">下单时间</span>
                <span>{{createTime | fomatDate}}</span>
            </div>
        </div>
        </div>


        <!-- 底部 -->
        <div class="fixl">
            <div style="padding-left:12px">
                <van-icon style="font-size:25px" name="service" />
            </div>
            <div style="padding-right:15px">
                <van-button style="font-size:15px" type="default" size="small">重新购买</van-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
           addressInfo:{},//用户地址
           carts:[],//商品
           expressFee:0,//运费
           totalMoney:0,//商品总价
        //    allFee:0,//实际付金额
           createTime:0,//时间搓

          

           
        }
    },
    created() {
        this.getDetail()
    },
    methods: {
        getDetail(){
            let url ="/order/detail"
            let data={
                orderId:this.orderId
            }
            this.$axios.post(url,data).then(res=>{
                console.log("res",res)
                console.log("res.result",res.result)
                this.addressInfo=res.result.addressInfo
                this.carts=res.result.carts
                this.expressFee=res.result.expressFee
                this.totalMoney=res.result.totalMoney
                // this.allFee=res.result.allFee
                this.createTime=res.result.createTime
            }).catch(err=>{
                console.log("err",err)
            })
            
        },
        goBack(){
            this.$router.push("/order/list")
        }
    },
    computed: {
        orderId(){
            return this.$store.state.orderId;
        },
          //////////////////商品的总价格
    allFee() {
      return this.$store.state.allFee*100;
    },
    },
};
</script>

<style lang="less" scoped>
.posflex{
    position: fixed;
    width: 100%;
    height: 46px;
    top:0px
}
.van-nav-bar .van-icon {
    color: #2e2f30;
    font-size: 22px;
}
.orderGoods {
    margin-bottom: 10px;
}
.payMoney {
    margin-bottom: 10px;
}
.fixl{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background:white;
    height: 49px;
    bottom: 0;
    position: fixed;
    width: 100%;
    z-index: 1;

}
.order-detail{
    height:100vh;
    background: #F4F4F4;
    
}
.van-card__bottom {
  line-height: 20px;
  margin-top: 25px;
  
}
.van-card {
  background: white;
  flex-grow: 1;
}

.user-button-address {
  font-size: 13px;
}

.user-address {
    padding: 15px;
    height: 87px;
    display: flex;
    flex-direction: column;
    justify-items: center;
    margin-bottom: 10px;
}
.view {
    box-sizing: border-box;
    padding-top: 46px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 30px;
    padding-left: 40px;
    height: 125px;
    background: url(https://file.sdyxmall.com/h5/v1/public/app/img/group5@2x.0b65469.png) no-repeat;
}
</style>